<template>
  <div class="wrapper">
    <template v-if="Edit">
      <span>行:</span>
    <el-input-number v-model="seatRow" size="mini" :min="4" :max="10" @change="SeatRe()"></el-input-number>

    <span>列:</span>
    <el-input-number v-model="seatCol" size="mini" :min="5" :max="10" @change="SeatRe()"></el-input-number>
    </template>
    
    <div class="seat-wrapper">
      <div class="screen-center">
        银幕中央
        <div class="mid-line"></div>
      </div>
      <div class="inner-seat-wrapper" ref="innerSeatWrapper">
        <div v-for="row in seatRow" :key="row">
          <!--这里的v-if很重要，如果没有则会导致报错，因为seatArray初始状态为空-->
          <div
            v-for="col in seatCol"
            :key="col"
            v-if="seatArray!=null"
            class="seat"
            :style="{width:seatSize+'px',height:seatSize+'px'}"
          >
            <div
              class="inner-seat"
              @click="handleChooseSeat(row-1,col-1)"
              
              :class="seatArray[row-1][col-1]===-1?'bought-seat':'unselected-seat'"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cinemaSeatChoose",
  data() {
    return {
      //影院座位的二维数组,-1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色)
      seatArray: null,
      //影院座位行数
      seatRow: this.$store.state.x,
      oldRow: null,
      //影院座位列数
      seatCol: this.$store.state.y,
      oldCol: null,
      //座位尺寸
      seatSize: ""
      //推荐选座最大数量
    };
  },
  props: {
    Edit: null
  },
  computed: {},
  methods: {
    //处理座位选择逻辑
    handleChooseSeat: function(row, col) {
      let seatValue = this.seatArray[row][col];
      let newArray = this.seatArray;
      //如果是无座位点击后变未选
      if (seatValue === 0) {
        newArray[row][col] = -1;
      } else if (seatValue === -1) {
        newArray[row][col] = 0;
      }
      //必须整体更新二维数组，Vue无法检测到数组某一项更新,必须slice复制一个数组才行
      this.seatArray = newArray.slice();
      this.$store.commit("SeatUp", this.seatArray);
    },
    SeatRe() {
      var row = this.seatRow - this.oldRow;
      var col = this.seatCol - this.oldCol;
      var Arr = this.seatArray;
      if (row > 0) {
        for (let i = 0; i < row; i++) {
          let rowseat = Array(this.seatCol).fill(0);
          Arr.push(rowseat);
        }
        this.oldRow = this.seatRow;
      } else if (row < 0) {
        for (let i = 0; i < -row; i++) {
          Arr.pop();
        }
        this.oldRow = this.seatRow;
      }
      if (col > 0) {
        for (let i = 0; i < col; i++) {
          for (let l = 0; l < this.seatRow; l++) {
            Arr[l].push(0);
          }
        }
        this.oldCol = this.seatCol;
      } else if (col < 0) {
        for (let i = 0; i < -col; i++) {
          for (let l = 0; l < this.seatRow; l++) {
            Arr[l].pop();
          }
        }
        this.oldCol = this.seatCol;
      }
      this.seatArray = Arr;
      this.$store.commit("SeatUp", Arr);
      this.$store.commit("SeatColUp", this.seatCol);
      this.$store.commit("SeatRowUp", this.seatRow);
      this.initSeatArray();
    },
    //初始座位数组
    initSeatArray: function() {
      if (this.seatArray == null) {
        this.seatCol = 5;
        this.seatRow = 5;
        let seatArray = Array(this.seatRow)
          .fill(0)
          .map(() => Array(this.seatCol).fill(0));
        this.seatArray = seatArray;
      }
     
      this.seatSize = this.$refs.innerSeatWrapper
        ? parseInt(
            parseInt(
              window.getComputedStyle(this.$refs.innerSeatWrapper).width,
              10
            ) / this.seatCol,
            10
          )
        : 0;
    }
  },
  created: function() {},
  mounted() {
    this.seatArray = this.$store.state.Seat;
    
    this.initSeatArray();
    this.oldCol = this.seatCol;
    this.oldRow = this.seatRow;
  }
};
</script>


<style scoped>
.wrapper {
  height: 50%;
  padding: 40px;
  box-sizing: border-box;
}
.cinema-wrapper {
  height: 50%;
}
.title {
  text-align: center;
}
.seat-wrapper {
  height: 500px;
  width: 700px;
  border: 1px dotted #c5c5c5;
  margin: 0 auto;
  position: relative;
  overflow: auto;
}
.screen {
  margin: 0 auto;
  height: 30px;
  width: 300px;
  background-color: #e3e3e3;
  border-radius: 0 0 30px 30px;
  color: #585858;
  line-height: 30px;
  text-align: center;
}
.inner-seat-wrapper {
  position: absolute;
  top: 120px;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}
.seat {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner-seat {
  width: 80%;
  height: 80%;
  cursor: pointer;
}
.selected-seat {
  background: url("./../assets/selected.png") center center no-repeat;
  background-size: 100% 100%;
}
.unselected-seat {
  background: url("./../assets/unselected.png") center center no-repeat;
  background-size: 100% 100%;
}
.bought-seat {
  background: url("./../assets/guodao.png") center center no-repeat;
  background-size: 100% 100%;
}
.screen-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px;
  font-size: 13px;
  border-radius: 5px;
  top: 50px;
  background-color: #f6f6f6;
  color: #636363;
  border: 1px solid #b1b1b1;
}
.mid-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  width: 1px;
  height: 400px;
  border-left: 1px dashed #919191;
}
.btn-wrapper {
  margin: 20px auto;
  width: 1000px;
  height: 30px;
  text-align: center;
}
.btn-buy {
  height: 100%;
  line-height: 30px;
  font-size: 14px;
  border-radius: 5px;
  padding: 0 5px;
  background-color: #ffa349;
  color: #ffffff;
  display: inline-block;
  cursor: pointer;
  margin-right: 10px;
}
.smart {
  background-color: #39ac6a;
}
.illustration {
  position: absolute;
  left: 0;
  top: 25px;
  height: 35px;
  width: 300px;
}
.illustration-img-wrapper {
  width: 25px;
  height: 25px;
  position: relative;
  top: 50%;
  display: inline-block;
  transform: translateY(-50%);
  margin-left: 10px;
}
.illustration-text {
  display: inline-block;
  height: 100%;
  line-height: 35px;
  font-size: 14px;
  position: relative;
  top: -2px;
}
</style>